<template>
  <button
    type="button"
    class="icon-button"
  >
    <AplayerIcon :icon="icon" />
  </button>
</template>
<script>
import { defineComponent } from 'vue'
import AplayerIcon from './icon.vue'
export default defineComponent({
  name: 'playbutton',
  components: {AplayerIcon},
  props: {
    icon: String
  }
})
</script>
<style lang="less">
.icon-button {
  width: 15px;
  height: 15px;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  opacity: .8;
  vertical-align: middle;
  padding: 0;
  font-size: 12px;
  margin: 0;
  display: inline;

  &:hover {
    opacity: 1;
  }

  .aplayer-fill {
    transition: all .2s ease-in-out;
  }
}
</style>
